<ion-header>
    <header-component>
        <ion-toolbar>
            <ion-buttons class="button-left">
                <img navBackButton src="assets/imgs/return.svg" alt="">
            </ion-buttons>
            <ion-title>{{ sysName }}</ion-title>
        </ion-toolbar>
        <nav-switch [navs]="rooms" (navChange)="roomChange($event)" (openVideo)="openRoomVideo()" [showVideo]="videoList.length > 0"></nav-switch>
    </header-component>
</ion-header>
<ion-content>
    <div class="top">
        <!-- 左边部分数据 -->
        <div class="left">
            <div class="square" *ngFor="let left of areaParams; let isOdd = odd" [hidden]='isOdd'>
                <div class="dataTitle text">
                    <label class="title">{{ left.deviceName }}</label>
                    <span class="unit" *ngFor='let detail of left.deviceParameters; first as isFirs'>
                        <label *ngIf="!isFirs">/</label>
                        <label>{{ detail.unit }}</label>
                    </span>
                </div>
                <div class="dataFlex">
                    <div *ngFor="let detail of left.deviceParameters; first as isFirs">
                        <span class="separator" *ngIf="!isFirs && detail.valueName || !isFirs && detail.value !== null">/</span>
                        <span [ngClass]='{"redColor": left.alarmInfo}'>
                            {{left.onlineStatus==2?'-' : detail.valueName || detail.value }}
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 中间部分数据 -->
        <div class="mid">
            <section>
                <div class="Text-init">
                    <div class="fire-alarm-info" *ngFor="let alarmInfo of alarmList" [ngStyle]="{'color': alarmInfo.alarmLevel === 3? '#FF1919' : '#FF8B02'}">
                        <span>{{ alarmInfo.deviceValueLastTime | date: 'yyyy-MM-dd HH:mm:ss' }}</span>
                        <p>{{ alarmInfo.deviceName + alarmInfo.alarmTypeName + ',告警值:' + alarmInfo.deviceValue }}
                        </p>
                    </div>
                </div>
            </section>
            <pic-list class="pic-status" [roomState]='roomState'></pic-list>
        </div>

        <!-- 右边部分数据 -->
        <div class="right">
            <div class="square" *ngFor="let left of areaParams; let isEven = even" [hidden]='isEven'>
                <div class="dataTitle text">
                    <label class="title">{{ left.deviceName }}</label>
                    <span class="unit" *ngFor='let detail of left.deviceParameters; first as isFirs'>
                        <label *ngIf="!isFirs">/</label>
                        <label>{{ detail.unit }}</label>
                    </span>
                </div>
                <div class="dataFlex">
                    <div *ngFor="let detail of left.deviceParameters; first as isFirs">
                        <span class="separator" *ngIf="!isFirs">/</span>
                        <span [ngClass]='{ "redColor": left.alarmInfo }'>
                            {{ detail.valueName || detail.value  }}
                        </span>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- 设备类型及设备列表 -->
    <div class="bottom">
        <div class="each-device-type" *ngFor="let group of roomModes">
            <sub-title *ngIf="group.deviceTypeName" [subTitleName]="group.deviceTypeName" [scrollData]="group.deviceTypeParams? group.deviceTypeParams: null" titleColor="#555" titleHeight="40px" noLine="true" titleFontSize="14px" backgroundColor="#F2F5F8"></sub-title>
            <div class="device-list">
                <div class="each-device" *ngFor="let device of (group.devices | listLength: 0:4); let i = index" (click)="device.cameraId ? toDeviceVideo(device) : toDevicePage(device, i, group.devices)" [ngClass]='{"seriousbg": device && device.alarmLevel==3,"alarmbg":device && device.alarmLevel==2}'>
                    <p class="device-title title" *ngIf="device && !device.cameraId" [ngStyle]='{"color": device.alarmLevel ? "#fff":""}'>{{ device.deviceName }}</p>
                    <div *ngIf='device && !device.cameraId'>
                        <span *ngIf='device.communicateStatus.value === 1 && device.runStatus.value === 1' class='greenColor' [ngStyle]='{"color": device.alarmLevel ? "#fff":""}'>{{device.runStatus.valueName}}</span>
                        <span *ngIf='device.communicateStatus.value === 1 && device.runStatus.value === 0' class='grayColor' [ngStyle]='{"color": device.alarmLevel ? "#fff":""}'>{{device.runStatus.valueName}}</span>
                        <span *ngIf='device.communicateStatus.value === 1 && device.cutSwitch.value === 1' class='greenColor' [ngStyle]='{"color": device.alarmLevel ? "#fff":""}'>{{device.cutSwitch.valueName}}</span>
                        <span *ngIf='device.communicateStatus.value === 1 && device.cutSwitch.value === 0' class='grayColor' [ngStyle]='{"color": device.alarmLevel ? "#fff":""}'>{{device.cutSwitch.valueName}}</span>
                        <span *ngIf='device.communicateStatus.value === 1 && device.disSwitch.value === 1' class='greenColor' [ngStyle]='{"color": device.alarmLevel ? "#fff":""}'>{{device.disSwitch.valueName}}</span>
                        <span *ngIf='device.communicateStatus.value === 1 && device.disSwitch.value === 0' class='grayColor' [ngStyle]='{"color": device.alarmLevel ? "#fff":""}'>{{device.disSwitch.valueName}}</span>
                        <span *ngIf='device.communicateStatus.value !== 1' class='grayColor' [ngStyle]='{"color": device.alarmLevel ? "#fff":""}'>{{device.communicateStatus.valueName}}</span>
                        <ion-icon *ngIf='device.communicateStatus.value !== 1' name="ios-close"></ion-icon>
                        <p *ngIf='device.communicateStatus.value === 1' class='autoStatus' [ngStyle]='{"color": device.alarmLevel ? "#fff":""}'>{{device.autoStatus.valueName}}</p>
                    </div>
                    <div *ngIf="device && device.cameraId">
                        <p class="device-title title" [ngStyle]='{"color": device.alarmLevel ? "#fff":""}'>{{ device.cameraName }}</p>
                        <div>
                            <span [ngClass]='{  "greenColor": device.isOnline, "grayColor": !device.isOnline}'>{{ device.isOnline? '在线 ': '离线 '}}</span>
                            <ion-icon *ngIf='device.isOnline===false ' name="ios-close"></ion-icon>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</ion-content>